<template>
  <div>
    <input v-model="inputValue" type="text" />
    <button @click="handleAddItem">提交{{name}}-{{readonlyName}}</button>
  </div>
  <ul>
    <!-- <li v-for="(item, index) in list" :key="index">{{item}}</li> -->
    <list-item v-for="(item, index) in list" :key="index" :msg="item"/>
  </ul>
</template>

<script>
import { reactive, ref, readonly } from 'vue';
import ListItem from './components/ListItem'
export default {
  name: 'App',
  components: { ListItem },
  setup(){
    const name = ref("item");
    const readonlyName = readonly(name);
    const inputValue = ref('');
    const list = reactive([]);
    console.log("list:",list);
    console.log("value",inputValue);
    const handleAddItem = () => {
      list.push(inputValue.value);
      inputValue.value = "";
    }
    setTimeout(() => {
      name.value = "张三";
    }, 1000);
    return {name, readonlyName,list, inputValue, handleAddItem}
  }
  
}
</script>

<style>

</style>
